<template>
  <div class="app-container">
    <pro-table
      ref="pageBox"
      title="通知"
      :request="getList"
      :columns="columns"
      :search="searchObj"
      @selectionChange="handleSelectionChange"
      @expandChange="handleExpandChange"
    >
      <template #toolbar>
        <el-button type="primary">全部标记为已读</el-button>
        <el-button
          :disabled="selectedArr.length <= 0"
          icon="el-icon-delete"
          @click="handleDelete"
        >
          批量删除
        </el-button>
      </template>

      <template #expand="{ row }">
        <div v-html="row.body"></div>
      </template>

      <template #title="{ row }">
        <i class="dot" :class="{ gray: row.haveRead }"></i>
        <span
          class="title"
          @click="$refs.pageBox.$refs.table.toggleRowExpansion(row)"
        >
          {{ row.title }}
        </span>
      </template>

      <template #date="{ row }">
        {{ row.createTime | parseTime }}
      </template>

      <template #operate="{ row }">
        <el-tooltip content="删除" placement="top">
          <i
            class="el-icon-delete operate-button"
            @click="handleDelete([row])"
          ></i>
        </el-tooltip>
      </template>
    </pro-table>
  </div>
</template>
<script>
export default {
  name: 'Notice',

  data() {
    return {
      showImport: false,
      showPageModal: false,
      selectedRow: {},
      isAddEdit: false,
      showAddEdit: false,
      selectedArr: [],
      columns: [
        { type: 'expand', tdSlot: 'expand' },
        { type: 'selection' },
        {
          label: '标题',
          tdSlot: 'title',
        },
        {
          label: '所属范围',
          prop: 'product',
        },

        {
          label: '创建时间',
          tdSlot: 'date',
          align: 'center',
          width: 160,
        },

        {
          label: '操作',
          tdSlot: 'operate',
          width: 120,
          align: 'center',
          fixed: 'right',
        },
      ],
      searchObj: {
        inputWidth: '200px',
        fields: [
          {
            type: 'select',
            label: '',
            name: 'haveRead',
            placeholder: '状态',
            options: [
              { name: '已读', value: true },
              { name: '未读', value: false },
            ],
          },
          {
            type: 'text',
            label: '',
            name: 'keyword',
            placeholder: '标题',
          },
        ],
      },
    }
  },

  methods: {
    async getList(params) {
      const { code, data } = await new Promise(resolve => {
        setTimeout(() => {
          resolve({
            code: 200,
            data: {
              list: [
                {
                  attachments: [],
                  body: '<p>尊敬的北京修治科技有限公司：您的H5页面“<span style="color:#000000">hell -com on</span>”已删除。</p>',
                  createTime: '2022-03-22T10:34:22.000+00:00',
                  enterpriseId: '141598637888113837',
                  haveRead: false,
                  id: '227476672180387968',
                  product: 'MESSENGER',
                  title: '页面“hell -com on”删除提醒',
                  type: 'SYSTEM',
                  userId: '0',
                  userType: 'ENTERPRISE',
                },
              ],
              total: 100,
            },
          })
        }, 500)
      })
      if (+code === 200) {
        return {
          data: data.list,
          total: +data.total,
        }
      }

      return {
        data: [],
        total: 0,
      }
    },
    handleSelectionChange(arr) {
      this.selectedArr = arr
    },
    handleExpandChange(row, expanded) {
      row.haveRead = true
    },
    async handleDelete() {
      this.$confirm(
        '选定的条目及条目相关的数据将被删除且不可恢复，您是否确定删除？',
        '删除',
        {
          iconClass: 'el-icon-warning-outline warning',
          center: true,
          closeOnClickModal: false,
        }
      )
    },

    handleShowAddEdit(item) {
      this.selectedRow = item || {}
      this.isAddEdit = true
      this.showAddEdit = true
    },
    handleShowImport() {
      this.showImport = true
    },
  },
}
</script>
<style lang="scss" scoped>
.dot {
  width: 6px;
  height: 6px;
  margin-right: 4px;
  display: inline-block;
  border-radius: 50%;
  background: $danger;
  vertical-align: middle;
  &.gray {
    background: #ccc;
  }
}
.title {
  cursor: pointer;
  &:hover {
    color: $primary;
  }
}
</style>
